<template>
  <div class="wrap">
    <!-- 头部 -->
    <div class="title">
      <!-- <div>
        <van-icon
          name="arrow-left"
          size="20"
          style="margin-left: 10px"
          @click="onClickLeft"
        />
      </div> -->
      <div class="title_content">xxxxxx</div>
      <!-- <div>
        <van-icon
          name="ellipsis"
          size="22"
          style="margin-right: 10px"
          @click="onClickRight"
        />
      </div> -->
    </div>
    <!-- 中间聊天区域 -->
    <div class="content_box" id="box" ref="scrollBox">
      <div class="timer">2022-08-02 11:08:07</div>
      <div v-for="(item, index) in chatList" :key="index">
        <!-- 左边 -->
        <div v-if="item.position == 'left'" class="userbox2">
          <div class="nameInfo2">
            <div style="font-size: 14px">{{ item.username }}</div>
            <!-- 表格 -->
            <div v-if="item.type === 'table'" class="tableinfo">
              <!-- <ve-table :columns="item.columns" :table-data="item.tableData" /> -->
              <template>
                <ve-table
                  :columns="item.columns"
                  :table-data="item.tableData"
                />
              </template>
            </div>
            <!-- 文本 -->
            <div v-else class="contentText2">
              {{ item.content }}
            </div>
          </div>
          <div>
            <van-image
              round
              width="50px"
              height="50px"
              :src="item.position == 'left' ? head.server : head.self"
            />
          </div>
        </div>

        <!-- 右边 -->
        <div v-else class="userbox">
          <div class="nameInfo">
            <div style="font-size: 14px">{{ item.username }}</div>
            <div class="contentText">
              {{ item.content }}
            </div>
          </div>
          <!--  -->
          <div>
            <van-image
              round
              width="50px"
              height="50px"
              :src="item.position == 'left' ? head.server : head.self"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <!-- 文字发送 -->
      <div class="text_send" v-if="!isVioce">
        <!-- 图标部分 -->
        <div class="icon-container">
          <!-- <van-icon name="volume-o" size="20" @click="changeToVioce" /> -->
          <voice-input-button
            v-model="result"
            @record="showResult"
            @record-start="recordStart"
            @record-stop="recordStop"
            @record-blank="recordNoResult"
            @record-failed="recordFailed"
            @record-ready="recordReady"
            @record-complete="recordComplete"
            returnMode="complete"
            interactiveMode="touch"
            color="#00ff00"
            tipPosition="top"
          >
            <template slot="no-speak">没听清您说的什么</template>
          </voice-input-button>
        </div>
        <van-field
          v-model="inputValue"
          center
          type="textarea"
          :autosize="{ maxHeight: 100, minHeight: 25 }"
          placeholder="请输入内容"
          rows="1"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendOut"
              >发送</van-button
            >
          </template>
        </van-field>
      </div>
      <!-- 语音发送 -->

      <div class="voice_send" v-else>
        <van-icon class="icon-container" name="records" size="20" />
        <voice-input-button
          v-model="result"
          @record="showResult"
          @record-start="recordStart"
          @record-stop="recordStop"
          @record-blank="recordNoResult"
          @record-failed="recordFailed"
          @record-ready="recordReady"
          @record-complete="recordComplete"
          interactiveMode="touch"
          color="#fff"
          tipPosition="top"
        >
          <template slot="no-speak">没听清您说的什么</template>
        </voice-input-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: null, //录音结果
      isVioce: false,
      head: {
        self: require("../assets/test.png"),
        server: require("../assets/head.jpg"),
      }, // 用户头像
      //聊天数据
      chatList: [
        {
          content: "请问荆州市局沙市营销部在2024年3月的总销售量是多少？",
          columns: [
            {
              field: "sku_id",
              key: "a",
              title: "SKU ID",
              align: "center",
            },
            {
              field: "product_name",
              key: "b",
              // width: 200,
              title: "产品名称",
              align: "center",
            },
            {
              field: "order_qty",
              key: "c",
              title: "订单数量",
              align: "left",
            },
          ],
          tableData: [
            {
              sku_id: "1001",
              product_name: "黄鹤楼（软蓝）",
              order_qty: 100,
            },
            {
              sku_id: "1002",
              product_name: "黄鹤楼（硬蓝）",
              order_qty: 150,
            },
            {
              sku_id: "1003",
              product_name: "黄鹤楼（软红）",
              order_qty: 200,
            },
            {
              sku_id: "1004",
              product_name: "黄鹤楼（硬红）",
              order_qty: 250,
            },
            {
              sku_id: "1005",
              product_name: "黄鹤楼（软黄）",
              order_qty: 300,
            },
          ],
          type: "table",
          username: "张三",
          position: "left",
          msg: "暂无数据",
          // 是否有sql,和是否展示sql
          hasSQL: true,
          isShowSQL: false,
          sqlString: "SELECT * FORM",
        },
        {
          username: "张三",
          content: "模拟数据123模拟数据123模拟数据123模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据123模拟数据123模拟数据123模拟数据123",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
        {
          username: "张三",
          content: "模拟数据123",
          position: "left",
          type: "text",
        },
        {
          username: "李四",
          content: "模拟数据123模拟数据",
          position: "right",
          type: "text",
        },
      ],
      //用户名
      userName: "张三",
      //输入内容
      inputValue: "",
      //滚动条距离顶部距离
      scrollTop: 0,

      originalBottomOffset: "0px", // 存储原始的 bottom 值
      // 2024.9.2
      // 底部菜单切换
    };
  },
  mounted() {
    this.setPageScrollTo();
    //创建监听内容部分滚动条滚动
    this.$refs.scrollBox.addEventListener("scroll", this.srTop);
    // 监听键盘事件
    // window.addEventListener('resize', this.handleResize);
  },
  updated(){
    // this.setPageScrollTo();
  },
  beforeDestroy() {
    // 移除监听器
    // window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    //返回
    onClickLeft() {
      console.log("返回");
    },
    //更多
    onClickRight() {
      console.log("按钮");
    },
    //滚动条默认滚动到最底部
    setPageScrollTo(s, c) {
      //获取中间内容盒子的可见区域高度
      this.scrollTop = this.$refs.scrollBox.scrollHeight;
      // setTimeout((res) => {
      //   //加个定时器，防止上面高度没获取到，再获取一遍。
      //   if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {
      //     this.scrollTop = document.querySelector("#box").scrollHeight;
      //   }
      // }, 100);
      // console.log('scrollHeight:', this.$refs.scrollBox.scrollHeight);
      // console.log('clientHeight:', this.$refs.scrollBox.clientHeight);
      // console.log('offsetHeight:', this.$refs.scrollBox.offsetHeight);
      //scrollTop：滚动条距离顶部的距离。
      //把上面获取到的高度座位距离，把滚动条顶到最底部
      this.$refs.scrollBox.scrollTop = this.scrollTop;
    },
    //滚动条到达顶部
    srTop() {
      //判断：当滚动条距离顶部为0时代表滚动到顶部了
      if (this.$refs.scrollBox.scrollTop == 0) {
        //逻辑简介：
        //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
        //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.chatList=A.concat(this.chatList)把数组合并进来就可以了

        //拿聊天记录逻辑:
        //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
        //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
        console.log("到顶了，滚动条位置 :", this.$refs.scrollBox.scrollTop);
      }
    },
    sendOut() {
      console.log("发送成功");
      this.addChat();
    },
    // todo:添加聊天内容
    addChat() {
      // 判断输入框是否为空
      if (this.inputValue.trim() === "") {
        console.log("输入框为空");
        return;
      }
      // 添加聊天内容
      this.chatList.push({
        username: this.userName,
        content: this.inputValue,
        position: "right",
        type: "text",
      });

      // 使用 $nextTick 确保 DOM 更新后执行操作
      this.$nextTick(() => {
        // 清空输入框
        this.inputValue = "";

        // 滚动到底部
        this.setPageScrollTo();
      });
    },
    // 监听键盘高度变化
    //
    handleResize() {
      // 获取当前窗口高度
      const windowHeight = window.innerHeight;
      const bodyHeight = document.body.clientHeight;
      if (windowHeight < bodyHeight) {
        // 键盘弹出时，重新计算底部位置
        this.$refs.bottom.style.position = "absolute";
        this.$refs.bottom.style.bottom = "0px";
      } else {
        // 键盘收起时，恢复原有布局
        this.$refs.bottom.style.position = "fixed";
        this.$refs.bottom.style.bottom = "0px";
      }
    },
    changeToVioce() {
      console.log("切换到语言");
      this.isVioce = !this.isVioce;
    },
    // =====================================》
    // 语言识别
    recordReady() {
      console.info("按钮就绪!");
    },
    recordStart() {
      console.info("录音开始");
    },
    showResult(text) {
      console.info("收到识别结果：", text);
    },
    recordStop() {
      console.info("录音结束");
    },
    recordNoResult() {
      console.info("没有录到什么，请重试");
    },
    recordComplete(text) {
      console.info("识别完成! 最终结果：", text);
    },
    recordFailed(error) {
      console.info("识别失败，错误栈：", error);
    },
    // =================================》
  },
};
</script>

<style scoped>
.wrap {
  height: 100%;
  width: 100%;
  position: relative;
}
.title {
  height: 40px;
  width: 100%;
  background-color: #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*2024.9.2  */
}
.title > .title-content {
  margin: auto; /* 居中对齐 */
}
.bottom {
  /* min-height: 50px; */
  width: 100%;
  /* border-top: 1px solid #eaeaea; */
  /* position: fixed; */
  /* bottom: 0; */
  /* 2024.9.2 */
  /* background-color: #eaeaea; */
  /* display: flex; */
  /* align-items: center; */
}
.bottom > .text_send {
  min-height: 50px;
  width: 100%;
  border-top: 1px solid #eaeaea;
  position: fixed;
  bottom: 0;
  /* 2024.9.2 */
  background-color: #eaeaea;
  display: flex;
  align-items: center;
}
.bottom > .voice_send {
  min-height: 50px;
  width: 100%;
  border-top: 1px solid #eaeaea;
  position: fixed;
  bottom: 0;
  /* 2024.9.2 */
  background-color: #eaeaea;
  display: flex;
  align-items: center;
}
/*  */
.icon-container {
  margin-right: 10px; /* 图标和输入框之间的间距 */
  margin-left: 10px;
}
.content_box {
  /* 
  中间栏计算高度，110是包含了上下固定的两个元素高度90
  这里padding：10px造成的上下够加了10，把盒子撑大了，所以一共是20要减掉
  然后不知道是边框还是组件的原因，导致多出了一些，这里再减去5px刚好。不然会出现滚动条到顶或者底部的时候再滚动的话就会报一个错，或者出现滚动条变长一下的bug
  */
  height: calc(100% - 115px);
  overflow: auto;
  padding: 10px;
}
.timer {
  text-align: center;
  color: #c2c2c2;
}

/* 发送的信息样式 */
/* 
右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构，然后微调一下就可以了
*/
.userbox {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}
.nameInfo {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-right: 10px;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contentText {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}

/* 接收的信息样式 */
/* 
左边消息思路解释：跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。我们写的左边就没必要再写了。
*/
.userbox2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}
.nameInfo2 {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-left: 10px;
}
.contentText2 {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}
/* 注释 */
.tableinfo {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 100%;
  padding: 5px 10px;
}
</style>
